<template>
  <div>
    <div
      v-for="item in playlists"
      @click="toPlayList(item.id)"
      class="each-songlist"
      :key="item.id"
    >
      <div class="each-songlist-left">
        <img v-lazy="item.coverImgUrl" alt="" />
      </div>
      <div class="each-songlist-right">
        <h3 class="each-songlist-name">{{ item.name }}</h3>
        <div class="each-songlist-msg">
          {{ item.trackCount }}首 by {{ item.creator.nickname }}, 播放{{
            item.playCount
          }}次
        </div>
      </div>
    </div>
    <mu-infinite-scroll
      :loadingText="loadingText"
      :loading="loading"
      @load="fetchData"
    />
  </div>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import { SongListInfo } from "@/model/music-info.model";
import Router, { Route } from "vue-router";
import { APIType } from "@/api";
import { SearchType } from "@/model/search-response.model";
import { CommonIdType } from "@/model/id-or-enum.model";
@Component({})
export default class SearchResultSongListComponent extends Vue {
  playlists: SongListInfo[] = [];
  loading = false;
  loadingText = "努力加载中...";

  $route: Route;
  $router: Router;
  $api: APIType;

  mounted() {
    this.fetchData();
  }
  // 计算当前搜索的值
  get query() {
    return this.$route.query.val;
  }
  // query变化重新搜索
  @Watch("query")
  private onQueryChange() {
    this.playlists = [];
    this.fetchData();
  }
  toPlayList(id: CommonIdType) {
    this.$router.push({ path: `/playlist/${id}` }).catch((err) => err);
  }
  fetchData() {
    const offset = this.playlists.length;
    this.loading = true;
    this.$api
      .searchByType<"MusicList">(this.query, SearchType.MusicList, offset)
      .then((res) => {
        if (res?.result?.playlists?.length) {
          this.playlists = [...this.playlists, ...res.result.playlists];
        }
      })
      .finally(() => (this.loading = false));
  }
}
</script>

<style lang="scss" scoped>
.each-songlist {
  display: flex;
  .each-songlist-left {
    width: 1rem;
    padding: 0.1rem;
    img {
      width: 100%;
    }
  }
  .each-songlist-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-bottom: 1px solid #f9fafc;
    .each-songlist-name {
      font-size: 0.2rem;
      font-weight: 400;
    }
    .each-songlist-msg {
      font-size: 0.15rem;
      color: #666;
    }
  }
}
</style>
